<!--
 * @Author: fengYM feng25321@163.com
 * @Date: 2023-09-22 11:15:56
 * @LastEditors: fengYM feng25321@163.com
 * @LastEditTime: 2023-10-13 16:09:53
 * @Description: 
-->
<template>
  <view class="itemBox">
    <view class="firstLine">
      <view class="l">订单号:{{ info.orderNo }}</view>
      <view class="r">{{ orderType[info.status] || "" }}</view>
    </view>
    <view class="timeLine">{{ dayjs(info.gmtCreate).format("YYYY-MM-DD HH:ss:mm") }}</view>
    <view class="nameBox">
      <image class="img" :src="info.goodUrl" mode=""></image>
      <view class="nameInfo">
        <view class="f">{{ info.goodTitle || "123123" }}</view>
        <view class="t">
          <view class="l">x{{ info.goodSum }}</view>
          <view class="price">
            <text>￥</text>
            {{ info.actualAmount }}
          </view>
        </view>
      </view>
    </view>
    <view>
      <u-modal :show="show" title="去发货" show-cancel-button @cancel="cancelFn" @confirm="submit">
        <view style="width: 100%">
          <view style="margin-bottom: 30rpx">
            <u-input v-model="fhInfo.expressCom" placeholder="输入物流公司"> </u-input>
          </view>
          <u-input v-model="fhInfo.expressNu" placeholder="输入物流号"> </u-input>
        </view>
      </u-modal>
    </view>
    <view class="btnList">
      <view class="btn-type" @click.stop="cancelOrderFn" v-if="info.status === 'WAIT_PAY' || info.status === 'PAY_SUCCESS'">取消订单</view>
      <view class="btn-type blue" @click.stop="goPay" v-if="!isShop && info.status === 'WAIT_PAY'">去支付</view>
      <view class="btn-type blue" v-if="!isShop && info.status === 'IN_DISTRIBUTION'" @click.stop="confirmReceipt">确认收货</view>
      <!-- <view class="btn-type" v-if="info.status === 'PAY_SUCCESS'">提醒发货</view> -->
      <view class="btn-type blue" v-if="isShop && info.status === 'PAY_SUCCESS'" @click.stop="goFaHuo">去发货</view>
    </view>
  </view>
</template>

<script setup lang="ts">
import dayjs from "dayjs";
import { useStore } from "../stores/counter";
import { cancelShopOrder, confirmReceiptShop, YCcancelOrder, YCconfirmOrder } from "@/api/order";
import { shopShipments } from "@/api/my";
import { ref } from "vue";

const { getOrderList, info, type } = defineProps<{
  getOrderList: () => void;
  info: any;
  isShop?: boolean;
  type: "putong" | "car" | "huiyuan";
}>();
const { orderType }: any = useStore();
const fhInfo = ref({
  expressCom: "",
  expressNu: "",
});
const show = ref();
const goPay = () => {
  useStore().setPayInfo({
    orderNo: info.orderNo,
    price: info.actualAmount,
    type,
  });
  uni.navigateTo({
    url: `/pages/payPage/payPage`,
  });
};
const confirmReceipt = () => {
  uni.showModal({
    title: "提示",
    content: "您确定要确认收货吗？",
    success: async function (res) {
      if (res.confirm) {
        if (type === "putong") {
          await confirmReceiptShop({
            orderNo: info.orderNo,
            userId: uni.getStorageSync("userId"),
          });
        } else if (type === "huiyuan") {
          await YCconfirmOrder({
            orderNo: info.orderNo,
            userId: uni.getStorageSync("userId"),
          });
        }

        uni.showToast({
          title: "操作成功",
          icon: "success",
          position: "top",
          success() {
            setTimeout(() => {
              getOrderList();
            }, 300);
          },
        });
      }
    },
  });
};
const cancelOrderFn = async () => {
  uni.showModal({
    title: "提示",
    content: "您确定要取消订单吗？",
    success: async function (res) {
      if (res.confirm) {
        if (type === "putong") {
          await cancelShopOrder({ orderNo: info.orderNo });
        } else if (type === "huiyuan") {
          await YCcancelOrder({ orderNo: info.orderNo });
        }

        uni.showToast({
          title: "取消成功",
          icon: "success",
          position: "top",
          success() {
            setTimeout(() => {
              getOrderList();
            }, 300);
          },
        });
      }
    },
  });
};
const goFaHuo = async () => {
  show.value = true;
};
const submit = async () => {
  if (!fhInfo.value.expressCom) {
    return uni.showToast({
      title: "请输入物流公司",
      icon: "none",
    });
  }
  if (!fhInfo.value.expressNu) {
    return uni.showToast({
      title: "请输入物流号",
      icon: "none",
    });
  }
  await shopShipments({
    orderNo: info.orderNo,
    ...fhInfo.value,
  });
  uni.showToast({
    title: "发货成功",
    icon: "success",
    position: "top",
    success() {
      setTimeout(() => {
        getOrderList();
      }, 300);
    },
  });
};
const cancelFn = () => {
  show.value = false;
  fhInfo.value.expressCom = "";
  fhInfo.value.expressNu = "";
};
</script>

<style lang="less" scoped>
@import "../pages/myPage/editPage/edit.less";

.itemBox {
  border-radius: 16rpx 16rpx 16rpx 16rpx;
  padding: 24rpx 32rpx;
  background: #fff;
  margin-bottom: 20rpx;
  .firstLine {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .l {
      font-size: 24rpx;
      line-height: 34rpx;
    }
    .r {
      font-size: 26rpx;
      font-weight: 500;
      background: linear-gradient(180deg, #ee9578 0%, #eb5693 100%);
      -webkit-background-clip: text;
      color: transparent;
      line-height: 36rpx;
    }
  }
  .timeLine {
    font-size: 24rpx;
    color: #999999;
    line-height: 30rpx;
    margin-top: 8rpx;
    margin-bottom: 24rpx;
  }
}
.nameBox {
  border-radius: 16rpx;
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;

  .img {
    width: 144rpx;
    height: 144rpx;
    margin-right: 24rpx;
  }
  .nameInfo {
    width: calc(100% - 168rpx);
    .f {
      font-size: 28rpx;
      font-weight: 500;
      line-height: 36rpx;
      text {
        margin-right: 24rpx;
      }
    }
    .s {
      font-size: 26rpx;
      color: #bebebe;
      line-height: 36rpx;
      margin-top: 8rpx;
    }
    .t {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 20rpx;
      .l {
        font-size: 24rpx;
        color: #bebebe;
        line-height: 34rpx;
      }
      .price {
        font-size: 30rpx;
        font-weight: bold;
        line-height: 34rpx;
        text {
          font-size: 24rpx;
          font-weight: 500;
          margin-right: -15rpx;
        }
      }
    }
  }
}
.btnList {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding-top: 20rpx;
  .btn-type {
    font-size: 28rpx;
    color: #a4a4a4;
    line-height: 40rpx;
    text-align: center;
    padding: 12rpx 24rpx;
    margin-right: 20rpx;
    background: #f1f1f1;
    &:last-child {
      margin-right: 0;
    }
  }
  .blue {
    background: #81d8d0;
    color: #fff;
  }
}
</style>
